<template>
  <div class="address-sheet">
    <div class="address-header border-bottom">
      <div class="back-icon" @click="goBack">
        <i class="el-icon-arrow-left">返回</i>
      </div>
      <div class="address-title">
        <p>我的地址</p>
      </div>
      <div class="cancel-address" @click="cancel">
        <span>编辑</span>
      </div>
    </div>
    <div class="address-content">
      <div class="content-box border"
           v-for="(item) in addressInfo"
           :key="item.id"
           @click="editAddress(item.id)">
        <div class="username box">
          <p>{{ item.username }}</p>
          <span v-if="item.is_default">[默认]</span>
        </div>
        <div class="user-info box">
          <p class="phone">{{ item.phone }}</p>
          <p class="address">{{ item.address }}</p>
        </div >
        <div class="foward-icon box" v-if="visible">
          <i class="el-icon-arrow-right"></i>
        </div>
        <div class="delete-icon box" v-if="!visible" @click="luck">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-shanchu"></use>
          </svg>
        </div>
      </div>
    </div>
    <div class="address-footer" @click="newAddress">
      <div class="footer-wrapper">
        <p>添加新地址</p>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
      name: "Address",
      data () {
        return {
          visible: true,
          addressInfo: [
            {
              id: '1',
              username: '梁先生',
              phone: '18577995017',
              address: '2栋C605',
              is_default: true,
              visible: true
            },
            {
              id: '2',
              username: '李先生',
              phone: '18520205017',
              address: '1栋C505',
              is_default: false,
              visible: true
            },
            {
              id: '3',
              username: '唐先生',
              phone: '18552795017',
              address: '4栋B601',
              is_default: false,
              visible: true
            }
          ],
        }
      },
      methods: {
        goBack() {
          this.$router.push('/personal_index');
        },
        newAddress () {
          console.log(111)
          this.$router.push('/add_address')
        },
        editAddress (id) {
          console.log(id)
          this.$router.push('edit_address/'+id)
        },
        cancel () {
          this.visible = !this.visible
        },
        luck (event) {
          event.cancelBubble = true;
          this.$router.push('/add_address');
          console.log(112)
        }
      }
    }
</script>

<style scoped>
  /* header */
  .address-header {
    width: 100%;
    height: 50px;
    background: #fff;
  }
  .address-title,.back-icon {
    float: left;
    color: #666;
    text-align: center;
  }
  .back-icon {
    width: 20%;
    line-height: 50px;
    z-index: 2;
    color: #1989fa;
    font-size: 16px;
  }
  .address-title {
    width: 60%;
    line-height: 50px;
    font-size: 18px;
  }
  .address-title p {
    margin: 0;
  }
  .cancel-address{
    width: 20%;
    float: left;
    text-align: center;
    line-height: 50px;
    font-size: 15px;
    font-weight: 500;
    color: #666;
  }
  .cancel-address span {
    padding: 6px 8px;
    background: #f7f7f7;
    border-radius: 3px;
    color: #6495ed;
    font-size: 14px;
  }
  /* 地址内容 */
  .address-content {
    padding: 0 15px;
  }
  .content-box:before {
    border-color: #e5e5e5;
    border-radius: 10px;
  }
  .content-box p {
    margin: 0;
    text-align: center;
  }
  .content-box {
    display: flex;
    -webkit-box-shadow: 0 0 10px #e5e5e5;
    -moz-box-shadow: 0 0 10px #e5e5e5;
    box-shadow: 0 0 10px #e5e5e5;
    padding: 10px 0;
    margin-top: 15px;
  }
  .box {
    flex: 1;
    text-align: center;
  }
  .content-box .user-info, .content-box .username{
    flex: 2;
  }
  .content-box .user-info p {
    text-align: left;
    font-size: 14px;
    color: #666;
    padding: 5px 0;
  }
  .username p {
    font-size: 14px;
    line-height: 30px;
  }
  .username span {
    font-size: 12px;
    color: darkcyan;
  }
  .content-box .foward-icon {
    font-size: 18px;
    text-align: center;
    height: 0;
    padding-bottom: 15%;
    overflow: hidden;
  }
  .content-box .delete-icon {
    height: 0;
    padding-bottom: 15%;
    overflow: hidden;
    line-height: 50px;
    font-size: 20px;
    background: antiquewhite;
  }
  .content-box .foward-icon i, .content-box .delete-icon .icon {
    line-height: 50px;
  }
  /* 添加新地址 */
  .address-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 45px;
    line-height: 45px;
    background: #2aaaf7;
  }
  .address-footer p {
    margin: 0;
    text-align: center;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
  }
</style>
